<template>
  <!-- 使用ElementUI的布局容器，包含两个部分，Header和Main -->
  <el-container>
    <!-- 头部区域 -->
    <el-header>
        <el-row>
          <el-col :span="8">
            <area-name v-on:myChange="changeAreaName"></area-name>
          </el-col>
          <el-col :span="8">智能检测大屏监控
          </el-col>
          <el-col :span="8">
            <Avatar></Avatar>
          </el-col>
        </el-row>

    </el-header>
    <!-- 主要区域 -->
    <el-main>
      <el-row>
        <!-- 左边区域 -->
        <el-col :span="6">
          <factor-alarm></factor-alarm>
          <device-alarm></device-alarm>
          <alarm-statistic></alarm-statistic>
        </el-col>
        <!-- 中间区域 -->
        <el-col :span="12">
          <hubei-map></hubei-map>
        </el-col>
        <!-- 右边区域 -->
        <el-col :span="6">
          <gauge-panel :areaName="currentAreaName"></gauge-panel>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
  import FactorAlarm from './alarm/FactorAlarm'
  import DeviceAlarm from './alarm/DeviceAlarm'
  import AlarmStatistic from './statistic/AlarmStatistic'
  import HubeiMap from './map/HubeiMap'
  import GaugePanel from './gauge/GaugePanel'
  import AreaName from './header/AreaName'
  import Avatar from './header/Avatar'

  export default {
    data: function () {
      return {
        areaName: [],
        currentAreaName: '',
        userInfo: false
      }
    },
    methods: {
      // 父组件接收子组件传递过来的数据
      changeAreaName(name) {
        this.currentAreaName = name;
      },

    },
    components: {
      FactorAlarm,
      DeviceAlarm,
      AlarmStatistic,
      HubeiMap,
      GaugePanel,
      AreaName,
      Avatar,
    }
  }
</script>

<style>

</style>
